<%@ include file="../common/IncludeTop.jsp"%>
<%@ page import="org.petstore.domain.Account "%>
<%@ page import="org.petstore.domain.Order" %>
<%@ page import="org.petstore.domain.CartItem" %>
<%@ page import="java.util.List" %>

<style>
	#first {
		display: none;
		position: absolute;
		top: 10%;
		left: 25%;
		width: 30%;
		height: 70%;
		padding: 20px;
		border: 30px solid rgba(0, 100, 0, 0.6);
		background-color: white;
		z-index:1002;
		overflow: auto;
	}
	#second {
		display: none;
		position: absolute;
		top: 10%;
		left: 25%;
		width: 30%;
		height: 70%;
		padding: 20px;
		border: 30px solid rgba(0, 100, 0, 0.6);
		background-color: white;
		z-index:1002;
		overflow: auto;
	}
	.blackOverlay {
		display: none;
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index:1001;
		-moz-opacity: 0.8;
		opacity:.80;
		filter: alpha(opacity=88);
	}
	.information {
		width:80%;
	}
	.button1 {
		width:25%;
		font-size: 15px;
		text-align: center;
		padding: 5px;
		margin: 10px;
	}
</style>

<div id="Content">
	<div id="BackLink">
		<a href="main">Return to Main Menu</a>
	</div>

	<div id="Catalog">

		<div id="Cart">

			<h2>Shopping Cart</h2>
			<form action="updateCart" method="post">
				<table>
					<tr>
						<th><b>Item ID</b></th>
						<th><b>Product ID</b></th>
						<th><b>Description</b></th>
						<th><b>In Stock?</b></th>
						<th><b>Quantity</b></th>
						<th><b>List Price</b></th>
						<th><b>Total Cost</b></th>
						<th>&nbsp;</th>
					</tr>

					<c:if test="${sessionScope.cart.size() == 0}">
						<tr>
							<td colspan="8"><b>Your cart is empty.</b></td>
						</tr>
					</c:if>

					<c:forEach var="cartItem" items="${sessionScope.cart}">
						<tr>
							<td>
								<a href="viewItem?itemId=${cartItem.item.itemId}">${cartItem.item.itemId}</a>
							</td>
							<td>
									${cartItem.item.product.productId}
							</td>
							<td>
									${cartItem.item.attribute1} ${cartItem.item.attribute2}
									${cartItem.item.attribute3} ${cartItem.item.attribute4}
									${cartItem.item.attribute5} ${cartItem.item.product.name}
							</td>
							<td>
									${cartItem.inStock}
							</td>
							<td>
								<input type="text" name="${cartItem.item.itemId}" value="${cartItem.quantity}" onblur="updateItem(this,'${cartItem.item.itemId}');"/>
								<script type="text/javascript" src="js/updateCart.js"></script>
							</td>
							<td>
								<!--format标签显示单价-->
								<fmt:formatNumber value="${cartItem.item.listPrice}"
												  pattern="$#,##0.00" />
							</td>
							<td>
								<label id="${cartItem.item.itemId}">${cartItem.total}</label>
								<!--format标签显示总价-->
								<!--
								<fmt:formatNumber value="${cartItem.total}"
												  pattern="$#,##0.00" />-->
							</td>
							<td>
								<a class="Button" href="removeItemFromCart?workingItemId=${cartItem.item.itemId}">Remove</a>
							</td>
						</tr>
					</c:forEach>
					<!--
						<tr>
							<td colspan="7">
								<input type="submit" value="Update Cart"/>
								<a class="Button" href="updateCart">Update Cart</a>
							</td>
							<td>&nbsp;</td>
						</tr>
					-->
				</table>
			</form>

			<c:if test="${sessionScope.cart.size() > 0}">
				<a class="Button" href = "JavaScript:void(0)" onclick = "submitInformation()">Proceed to Checkout</a>
			</c:if>
		</div>

		<%
			Order order = new Order();
			Account account = (Account)session.getAttribute("account");
			List<CartItem> cart = (List<CartItem>)session.getAttribute("cart");
			order.initOrder(account, cart);
			order.getBillToFirstName();
			session.setAttribute("order", order);
		%>

		<div id = "first" class = "submitBill">
			<div id="Catalog1"></div>
			<form action="conFirmOrderForm" method="post">
				<table>
					<tr>
						<th colspan=2>Payment Details</th>
					</tr>
					<tr>
						<td>Card Type:</td>
						<td>
							<select name="order.cardType">
								<option>Visa</option>
								<option>Mastercard</option>
								<option>Visa</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Card Number:</td>
						<td><input type="text" name="order.creditCard" value="${order.creditCard}" class = "information"/> </td>
					</tr>
					<tr>
						<td>Expiry Date (MM/YYYY):</td>
						<td><input type="text" name="order.expiryDate" value="${order.expiryDate}" class = "information"/></td>
					</tr>
					<tr>
						<th colspan=2>Billing Address</th>
					</tr>

					<tr>
						<td>First name:</td>
						<td><input type="text" name="order.billToFirstName" value="${order.billToFirstName}" class = "information"/></td>
					</tr>
					<tr>
						<td>Last name:</td>
						<td><input type="text" name="order.billToLastName" value="${order.billToLastName}" class = "information"/></td>
					</tr>
					<tr>
						<td>Address 1:</td>
						<td><input type="text" size="40" name="order.billAddress1" value="${order.billAddress1}" class = "information"/></td>
					</tr>
					<tr>
						<td>Address 2:</td>
						<td><input type="text" size="40" name="order.billAddress2" value="${order.billAddress2}" class = "information"/></td>
					</tr>
					<tr>
						<td>City:</td>
						<td><input type="text" name="order.billCity" value="${order.billCity}" class = "information"/></td>
					</tr>
					<tr>
						<td>State:</td>
						<td><input type="text" size="4" name="order.billState" value="${order.billState}" class = "information"/></td>
					</tr>
					<tr>
						<td>Zip:</td>
						<td><input type="text" size="10" name="order.billZip" value="${order.billZip}" class = "information"/></td>
					</tr>
					<tr>
						<td>Country:</td>
						<td><input type="text" size="15" name="order.billCountry" value="${order.billCountry}" class = "information"/></td>
					</tr>
					<tr>
						<td colspan=2><input type="checkbox" name="shippingAddressRequired">Ship to different address...</td>
					</tr>
				</table>
				<br><br>
				<input type="button" class="button1" name="newOrder" onclick="confirmInformation()" id = "submitInformation" value="Continue" />
				<input type="button" class="button1" name="newOrder" onclick="closeOne()" id = "cancel" value="Cancel" />
			</form>
		</div>
		<div id="fade" class="blackOverlay"></div>
		<div id="second" class ="checkInformation">
			<div id="Catalog2">Please confirm the information below and then press continue...
				<table>
					<tr>
						<th align="center" colspan="2">
							<font size="4">
								<b>Order</b>
							</font>
							<br />
							<font size="3">
								<b>${sessionScope.order.orderDate}</b>
							</font>
						</th>
					</tr>
					<tr>
						<th colspan="2">Billing Address</th>
					</tr>
					<tr>
						<td>First name:</td>
						<td><c:out value="${sessionScope.order.billToFirstName}" /></td>
					</tr>
					<tr>
						<td>Last name:</td>
						<td><c:out value="${sessionScope.order.billToLastName}" /></td>
					</tr>
					<tr>
						<td>Address 1:</td>
						<td><c:out value="${sessionScope.order.billAddress1}" /></td>
					</tr>
					<tr>
						<td>Address 2:</td>
						<td><c:out value="${sessionScope.order.billAddress2}" /></td>
					</tr>
					<tr>
						<td>City:</td>
						<td><c:out value="${sessionScope.order.billCity}" /></td>
					</tr>
					<tr>
						<td>State:</td>
						<td><c:out value="${sessionScope.order.billState}" /></td>
					</tr>
					<tr>
						<td>Zip:</td>
						<td><c:out value="${sessionScope.order.billZip}" /></td>
					</tr>
					<tr>
						<td>Country:</td>
						<td><c:out value="${sessionScope.order.billCountry}" /></td>
					</tr>
					<tr>
						<th colspan="2">Shipping Address</th>
					</tr>
					<tr>
						<td>First name:</td>
						<td><c:out value="${sessionScope.order.shipToFirstName}" /></td>
					</tr>
					<tr>
						<td>Last name:</td>
						<td><c:out value="${sessionScope.order.shipToLastName}" /></td>
					</tr>
					<tr>
						<td>Address 1:</td>
						<td><c:out value="${sessionScope.order.shipAddress1}" /></td>
					</tr>
					<tr>
						<td>Address 2:</td>
						<td><c:out value="${sessionScope.order.shipAddress2}" /></td>
					</tr>
					<tr>
						<td>City:</td>
						<td><c:out value="${sessionScope.order.shipCity}" /></td>
					</tr>
					<tr>
						<td>State:</td>
						<td><c:out value="${sessionScope.order.shipState}" /></td>
					</tr>
					<tr>
						<td>Zip:</td>
						<td><c:out value="${sessionScope.order.shipZip}" /></td>
					</tr>
					<tr>
						<td>Country:</td>
						<td><c:out value="${sessionScope.order.shipCountry}" /></td>
					</tr>
				</table>
				<br><br>
				<input type="button" class = "button1" value = "Confirm" onclick= "confirmOrder()"/>
				<input type="button" class = "button1" value = "Return" onclick = "closeTwo()"/>
				<input type="button" class = "button1" value = "Cancel" onclick = "closeThree()"/>
			</div>
		</div>

		<script>
			function submitInformation()
			{
				document.getElementById('first').style.display='block';
				document.getElementById('fade').style.display='block';
			}
			function confirmInformation()
			{
				document.getElementById('first').style.display='none';
				document.getElementById('second').style.display='block';
			}
			function closeOne()
			{
				document.getElementById('first').style.display='none';
				document.getElementById('fade').style.display='none';
			}
			function closeTwo()
			{
				document.getElementById('first').style.display='block';
				document.getElementById('second').style.display='none';
			}
			function closeThree()
			{
				document.getElementById('fade').style.display='none';
				document.getElementById('second').style.display='none';
			}
			function confirmOrder()
			{
				location.href="newOrder";
			}
		</script>

		<div id="Separator">&nbsp;</div>
	</div>
</div>
<script>
	/*var xhr;
	function updateItem(item) {
		console.log("success");
		//xhr = new XMLHttpRequest();
		//xhr.onreadystatechange = update;
		xhr.open("POST", "updateCart?itemId="+item.name+"&quantity="+item.value, true);
		xhr.send(null);
		location.reload();
	}*/
</script>
<%@ include file="../common/IncludeButtom.jsp"%>
